<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '消息',
  },
}
</route>

<template>
  <view>
    <wd-navbar title="消息" fixed placeholder safeAreaInsetTop></wd-navbar>
    <wd-toast />

    <view class="card-shadow px-4 mt-4">
      <wd-row gutter="20">
        <wd-col :span="8" custom-class="center-icon">
          <wd-button icon="clear" type="icon"></wd-button>
        </wd-col>
        <wd-col :span="8" custom-class="center-icon">
          <wd-button icon="filter" type="icon"></wd-button>
        </wd-col>
        <wd-col :span="8" custom-class="center-icon">
          <wd-button icon="filter-clear" type="icon"></wd-button>
        </wd-col>
      </wd-row>
    </view>

    <view @click.stop="closeOutside" class="mt-2 card-shadow">
      <wd-swipe-action v-for="(item, index) in testCases" :key="index">
        <NoticeItem :user="item.user" :message="item.message"></NoticeItem>
        <template #right>
          <view class="action">
            <view class="button" style="background: #ffb300" @click="handleAction('操作2')">
              置顶
            </view>
            <view class="button" style="background: #e2231a" @click="handleAction('操作3')">
              删除
            </view>
          </view>
        </template>
      </wd-swipe-action>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useToast, useQueue } from 'wot-design-uni'

const { closeOutside } = useQueue()

const toast = useToast()

function handleAction(action: string) {
  toast.show(`点击了${action}`)
}

const testCases = [
  {
    user: { avatar: 'https://unpkg.com/wot-design-uni-assets/redpanda.jpg', nickname: 'Alice' },
    message: '早上好，今天天气不错！',
  },
  {
    user: { avatar: 'https://unpkg.com/wot-design-uni-assets/capybara.jpg', nickname: 'Bob' },
    message: '昨天的会议很有成效，我们提出的方案得到了大家的认可。',
  },
  {
    user: { avatar: 'https://unpkg.com/wot-design-uni-assets/panda.jpg', nickname: 'Charlie' },
    message: '我晚点发你文档，你先看看初稿。',
  },
  {
    user: { avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: 'Daisy' },
    message: '嗨！下周有空吗？我们计划去爬山，一起来吗？',
  },
  {
    user: { avatar: 'https://unpkg.com/wot-design-uni-assets/meng.jpg', nickname: 'Evan' },
    message: '最新的项目代码更新了，麻烦你晚点同步一下。',
  },
]
</script>

<style lang="scss" scoped>
.action {
  height: 100%;
}

.button {
  display: inline-block;
  height: 100%;
  padding: 0 11px;
  line-height: 42px;
  color: white;
}

.card-shadow {
  border-radius: 32rpx;
  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
  transition: box-shadow 0.3s ease-in-out;
}

.card-shadow:hover {
  box-shadow: 0 6px 12px rgb(0 0 0 / 15%);
}

:deep(.center-icon) {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
